<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                template="./templates/templateHome.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:p="http://primefaces.org/ui"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:f="http://xmlns.jcp.org/jsf/core">

    <ui:define name="title">
        Função
    </ui:define>

    <ui:define name="content">

        <p:growl id="growlFuncao" life="5000" showDetail="true"/>

        <h:form rendered="#{loginBean.exibeFuncaoAdm}">
            <p:commandButton id="btnCriarFuncao" title="Criar uma função" label="Criar" value="Criar"
                             icon="icon-criar" oncomplete="dialogCriarFuncao.show()"/>
        </h:form>

        <h:form id="formDataTableFuncao" rendered="#{loginBean.exibeFuncaoAdm}">
            <center>
                <p:dataTable id="dataTableFuncao" selectionMode="single" paginator="true" rows="5" style="width: 80%"
                             paginatorPosition="bottom" paginatorTemplate="{CurrentPageReport} {FirstPageLink}
                             {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                             paginatorAlwaysVisible="false"
                             rowKey="#{funcao.codFuncao}" selection="#{funcaoBean.funcaoSelecionada}"
                             var="funcao" value="#{funcaoBean.lista}">
                    <f:facet name="header">
                        Lista de Funções  
                    </f:facet>

                    <p:column headerText="Código da Função" style="width:10%">
                        <h:outputText value="#{funcao.codFuncao}"/>
                    </p:column>

                    <p:column headerText="Nome" style="width:24%">
                        <h:outputText value="#{funcao.nome}"/>
                    </p:column>

                    <p:column headerText="Descrição" style="width:36%">
                        <h:outputText value="#{funcao.descricao}"/>
                    </p:column>

                    <p:column headerText="Estado" style="width:10%">
                        <h:outputText value="#{funcao.estado}"/>
                    </p:column>

                    <p:column headerText="Ações" style="width:4%">
                        <p:panelGrid columns="2">
                            <p:commandButton id="btnAlterarFuncao" title="Alterar a função" label="Alterar" value="Alterar"
                                             icon="icon-editar" oncomplete="dialogAlterarFuncao.show()"
                                             update=":formAlterarFuncao">
                                <f:setPropertyActionListener value="#{funcao}" target="#{funcaoBean.funcaoSelecionada}"/>
                            </p:commandButton>

                            <p:commandButton id="btnExcluirFuncao" title="Excluir a função" label="Excluir" value="Excluir"
                                             icon="icon-excluir" oncomplete="dialogExcluirFuncao.show()"
                                             update=":formExcluirFuncao">
                                <f:setPropertyActionListener value="#{funcao}" target="#{funcaoBean.funcaoSelecionada}"/>
                            </p:commandButton>
                        </p:panelGrid>
                    </p:column>
                </p:dataTable>
            </center>
        </h:form>

        <h:form id="formCriarFuncao">
            <p:dialog id="dialogCriarFuncao" header="Criar Função" widgetVar="dialogCriarFuncao" resizable="false"
                      showEffect="size" hideEffect="blind" modal="true" draggable="false">
                <h:panelGrid id="panelGridCriarFuncao" columns="2" cellpadding="4" style="margin:0 auto;">

                    <h:outputLabel for="nomeCriarFuncao" value="* Nome:"/>
                    <p:inputText id="nomeCriarFuncao" title="Nome da função" label="Nome" required="true"
                                 requiredMessage="Favor informar o nome da função."
                                 value="#{funcaoBean.funcaoSelecionada.nome}">
                        <p:watermark for="nomeCriarFuncao" value="Função para o usuário"/>
                        <p:message for="nomeCriarFuncao"/>
                    </p:inputText>

                    <h:outputLabel for="descCriarFuncao" value="* Descrição:"/>
                    <p:inputText id="descCriarFuncao" title="Descrição da função" label="Descrição" required="true"
                                 requiredMessage="Favor inserir a descrição da função."
                                 value="#{funcaoBean.funcaoSelecionada.descricao}">
                        <p:watermark for="descCriarFuncao" value="Descrição da função"/>
                        <p:message for="descCriarFuncao"/>
                    </p:inputText>

                    <h:outputLabel for="estadoCriarFuncao" value="* Estado"/>
                    <p:selectOneMenu id="estadoCriarFuncao" required="true"
                                     requiredMessage="Favor informar o estado da função."
                                     value="#{funcaoBean.funcaoSelecionada.estado}">
                        <f:selectItem itemLabel="- Selecione -" itemValue=""/>
                        <f:selectItem itemLabel="Ativada" itemValue="A"/>  
                        <f:selectItem itemLabel="Desativada" itemValue="D"/>
                        <p:message for="estadoCriarFuncao"/>
                    </p:selectOneMenu>

                    <f:facet name="footer">
                        <p:separator/>
                        <center>
                            <p:commandButton id="btnAceitarCriarFuncao" title="Salvar a função" label="Salvar" value="Salvar" 
                                             icon="icon-salvar" oncomplete="dialogCriarFuncao.hide()"
                                             update=":growlFuncao, :formDataTableFuncao"
                                             validateClient="true"
                                             actionListener="#{funcaoBean.btnCriarFuncao(actionEvent)}"/>
                            <p:commandButton id="btnCancelarCriarFuncao" title="Cancelar" label="Cancelar" value="Cancelar" 
                                             icon="icon-cancelar" oncomplete="dialogCriarFuncao.hide()"/>
                        </center>
                    </f:facet>
                </h:panelGrid>
            </p:dialog>
        </h:form>

        <h:form id="formAlterarFuncao">
            <p:dialog id="dialogAlterarFuncao" header="Alterar Função" widgetVar="dialogAlterarFuncao" resizable="false"
                      showEffect="fade" hideEffect="explode" modal="true" draggable="false">
                <h:inputHidden value="#{funcaoBean.funcaoSelecionada.codFuncao}"/>
                <h:panelGrid id="panelGridAlterarFuncao" columns="2" cellpadding="4" style="margin:0 auto;">

                    <h:outputLabel for="nomeAlterarFuncao" value="* Nome:"/>
                    <p:inputText id="nomeAlterarFuncao" title="Nome da função" label="Nome" required="true"
                                 requiredMessage="Favor informar o nome da função."
                                 value="#{funcaoBean.funcaoSelecionada.nome}">
                        <p:watermark for="nomeAlterarFuncao" value="Função para o usuário"/>
                        <p:message for="nomeAlterarFuncao"/>
                    </p:inputText>

                    <h:outputLabel for="descAlterarFuncao" value="* Descrição:"/>
                    <p:inputText id="descAlterarFuncao" title="Descrição da função" label="Descrição" required="true"
                                 requiredMessage="Favor inserir a descrição da função."
                                 value="#{funcaoBean.funcaoSelecionada.descricao}">
                        <p:watermark for="descAlterarFuncao" value="Descrição da Função"/>
                        <p:message for="descAlterarFuncao"/>
                    </p:inputText>

                    <h:outputLabel for="estadoAlterarFuncao" value="* Estado"/>
                    <p:selectOneMenu id="estadoAlterarFuncao" required="true"
                                     requiredMessage="Favor informar o estado da função."
                                     value="#{funcaoBean.funcaoSelecionada.estado}">
                        <f:selectItem itemLabel="- Selecione -" itemValue=""/>
                        <f:selectItem itemLabel="Ativada" itemValue="A"/>  
                        <f:selectItem itemLabel="Desativada" itemValue="D"/>
                        <p:message for="estadoAlterarFuncao"/>
                    </p:selectOneMenu>

                    <f:facet name="footer">
                        <p:separator/>
                        <center>
                            <p:commandButton id="btnAceitarAlterarFuncao" title="Alterar a função" label="Alterar" value="Alterar" 
                                             icon="icon-salvar" oncomplete="dialogAlterarFuncao.hide()"
                                             update=":growlFuncao, :formDataTableFuncao"
                                             validateClient="true"
                                             actionListener="#{funcaoBean.btnAlterarFuncao(actionEvent)}"/>
                            <p:commandButton id="btnCancelarAlterarFuncao" title="Cancelar a alteração" label="Cancelar" value="Cancelar"
                                             icon="icon-cancelar" oncomplete="dialogAlterarFuncao.hide()"/>
                        </center>
                    </f:facet>
                </h:panelGrid>
            </p:dialog>
        </h:form>

        <h:form id="formExcluirFuncao">
            <p:confirmDialog id="confirmDialogExcluirFuncao" header="Exclusão de função" widgetVar="dialogExcluirFuncao"
                             showEffect="bounce" hideEffect="drop" severity="alert"
                             message="Tem certeza que deseja excluir a função de #{funcaoBean.funcaoSelecionada.nome}?">
                <h:inputHidden value="#{funcaoBean.funcaoSelecionada.codFuncao}"/>
                <center>
                    <p:commandButton id="btnConfirmarExcluirFuncao" title="Confirmar a exclusão da função" label="Confirmar" value="Confirmar"
                                     icon="icon-confirmar" oncomplete="dialogExcluirFuncao.hide()"
                                     update=":growlFuncao, :formDataTableFuncao"
                                     actionListener="#{funcaoBean.btnExcluirFuncao(actionEvent)}"/>
                    <p:commandButton id="btnCancelarExcluirFuncao" title="Cancelar a exclusão da função" label="Cancelar" value="Cancelar"
                                     icon="icon-cancelar" oncomplete="dialogExcluirFuncao.hide()"/>
                </center>
            </p:confirmDialog>
        </h:form>

    </ui:define>

</ui:composition>